<template>

  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <span slot="before">{{ emloyessList.length }}</span>
        <template slot="after">
          <el-button size="small" type="warning" @click="$router.push('/import')">导入</el-button>
          <el-button size="small" type="danger" @click="deriveList">导出</el-button>
          <el-button v-if="checkPerm('employees')" size="small" type="primary" @click="isShowDialog = true">新增员工</el-button>
        </template>
      </page-tools>
      <!-- 放置表格和分页 -->
      <el-card>
        <el-table border :data="emloyessList">
          <el-table-column label="序号" sortable="" type="index" :index="currIndex" />
          <el-table-column label="头像" sortable="" type="index" width="100px">
            <template #default="{row}">
              <img v-fixImg class="avater" :src="row.staffPhoto" alt="">
            </template>
          </el-table-column>
          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="电话" sortable="" prop="mobile" width="150px" />
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <el-table-column label="聘用形式" sortable="" prop="formOfEmployment" :formatter="formOfEmployment" />

          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="">
            <template #default="{row}">
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="账户状态" sortable="" prop="enableState">
            <template #default="{row}">
              <el-switch
                v-model="row.enableState"
                :active-value="1"
                :inactive-value="2"
                disabled
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" width="280">
            <template #default="{row}">
              <el-button type="text" size="small" @click="$router.push('/employees/detail/'+row.id)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="getRole(row.id)">角色</el-button>
              <el-button type="text" size="small" @click.native="delEmployess(row.id)">删除</el-button>
            </template>

          </el-table-column></el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="pageConfig.size"
            @current-change="currentChange"
          />
        </el-row>
        <Addemployee :is-show-dialog="isShowDialog" @isShowDialog="isShowDialog = false" @addEmloyees="getEmloyees" />

        <Assignrole ref="assignrole" :is-show-role="isShowRole" @assignRoles="isShowRole = false" />
      </el-card>
    </div>
  </div>

</template>

<script>
// import PageTools from '@/components/PageTools' 已全局注册
import { getEmloyees, delEmloyees } from '@/api/employees'
import Addemployee from './components/add-employee.vue'
import Employees from '@/constant/employees'
import { formatDate } from '@/filters/index'
import { export_json_to_excel } from '@/vendor/Export2Excel'
import Assignrole from './components/assign-role.vue'
export default {
  components: {
    Addemployee,
    Assignrole
  },
  data() {
    return {
      pageConfig: {
        page: 1,
        size: 5
      },
      emloyessList: [],
      total: 1,
      isShowDialog: false,
      isShowRole: false
    }
  },
  created() {
    this.getEmloyees()
  },
  methods: {
    getRole(id) {
      this.$refs.assignrole.getRoleId(id)
      this.isShowRole = true
    },
    async getEmloyees() {
      const { rows, total } = await getEmloyees(this.pageConfig)
      this.total = total
      console.log(rows)
      this.emloyessList = rows.map(user => {
        const date = new Date()
        return {
          ...user,
          timeOfEntry: date.toString(),
          enableState: 1
        }
      })
    },
    // 分页功能
    currentChange(newPage) {
      // console.log(newPage)
      this.pageConfig.page = newPage
      this.getEmloyees()
    },
    formOfEmployment(row, column, cellValue, index) {
      const res = Employees.hireType.find(item => Number(item.id) === Number(cellValue))
      return res ? res.value : '未知'
    },
    currIndex(index) {
      return (this.pageConfig.page - 1) * this.pageConfig.size + index + 1
    },
    async delEmployess(id) {
      await this.$confirm('是否要删除')
      await delEmloyees(id)
      this.$message.success('删除成功')
      this.getEmloyees()
    },
    async deriveList() {
      const { rows } = await getEmloyees({ page: 1, size: this.total })
      // console.log(122, rows)

      const headers = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      const header = Object.keys(headers)
      const data = rows.map(user => {
        const arr = []
        for (const key in headers) {
          if (headers[key] === 'formOfEmployment') {
            const value = user[headers[key]]
            const res = Employees.hireType.find(item => item.id === value)
            arr.push(res ? res.value : '未知')
          } else if (headers[key] === 'timeOfEntry' || headers[key] === 'correctionTime') {
            const val = user[headers[key]]
            arr.push(formatDate(val))
          } else {
            arr.push(user[headers[key]])
          }
        }
        return arr
      })
      console.log(151, data)
      export_json_to_excel({
        header,
        data
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.avater {
  width: 100%;
  height: 100%;

}
</style>
